import React, { useState, useEffect, useCallback } from 'react';
import { postAccAmoebaChanceFindAmoebaChanceQr,getAccAmoebaChanceAffirm } from '../../../financialApi'
import SelectModule from '../components/SelectModule';
import NoStateModule from '../components/OkAndNoStateModule';
import { CostNature } from '../../enum';
import ButtonNoAndOk from '../../../../../assets/image/icon/noAndOk.png';
import ButtonOk from '../../../../../assets/image/icon/ok.png';
import ButtonNo from '../../../../../assets/image/icon/no.png';
import {
    PurchaseConfirmationPageAll,
    PurchaseConfirmationPageTop,
    PurchaseConfirmationPageContent
} from './style';
import { message, PageHeader, Table, Button, Space, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 费用管理 -- 内部交易 -- 机会成本分配 -- 承担确认
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-27） 创建
 */

const CommitmentConfirmationPage = () => {
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [selectData, setSelectData] = useState({}); //搜索data
    const [okAndNoStateModuleShow, setOkAndNoStateModuleShow] = useState(false);
    const [clickId, setClickId] = useState(undefined);
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postAccAmoebaChanceFindAmoebaChanceQr(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun]);
    //搜索-- 搜索
    const handleSelectModuleOk = values => {
        const parames = {
            currentPage: 1,
            size: 10,
            ...values
        }
        setSelectData(values)
        listFun(parames);
    }
    //搜索-- 重置
    const handleSelectModuleReset = () => {
        listFun();
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //退回
    const handleReturn = id => {
        setClickId(id);
        setOkAndNoStateModuleShow(true)
    }
    //
    const handleConfirm = id => {
        confirm({
            title: '是否确认?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
              ;(async () => {
                  const {code, msg} = await getAccAmoebaChanceAffirm({
                    id,
                    isReceive: true
                  });
                  if(code === '20000') {
                    message.success('确认成功');
                    const parames = {
                        currentPage: pagingData.currentPage,
                        size: pagingData.size,
                        ...selectData
                    }
                    listFun(parames);
                  }else{
                      message.error(msg);
                  }
              })();
            }
          });
    }
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '60px',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '流水号',
            align: 'center',
            dataIndex: 'serialNo'
        },
        {
            title: '发生时间',
            align: 'center',
            dataIndex: 'happenDate'
        },
        {
            title: '成本事由',
            align: 'center',
            dataIndex: 'reason'
        },
        {
            title: '成本性质',
            align: 'center',
            dataIndex: 'nature',
            render: text => <span>{CostNature[text]}</span>
        },
        {
            title: '机会成本金额',
            align: 'center',
            dataIndex: 'money'
        },
        {
            title: '承担人员',
            align: 'center',
            dataIndex: 'assumeMainName'
        },
        {
            title: '分配状态',
            align: 'center',
            dataIndex: 'state',
            render: text => <span>
                {
                    text === 0 && <>
                        <img
                            style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                            src={ButtonNoAndOk}
                            alt='未出售icon'
                        />
                        <span style={{ color: '#666666' }}>
                            未确认
                        </span>
                    </>
                }
                {
                    text === 1 && <>
                        <img
                            style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                            src={ButtonOk}
                            alt='已出售icon'
                        />
                        <span style={{ color: '#19DA38' }}>
                            已确认
                        </span>

                    </>
                }
                {
                    text === 2 && <>
                        <img
                            style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                            src={ButtonNo}
                            alt='已出售icon'
                        />
                        <span style={{ color: '#FF0014' }}>
                            驳回
                        </span>

                    </>
                }
            </span>
        },
        {
            title: '操作',
            align: 'center',
            render: (text, recode) => <Space>
                <Button ghost type='primary' onClick={() => handleConfirm(recode.id)}>确认</Button>
                <Button ghost type="primary" onClick={() => handleReturn(recode.id)} danger>驳回</Button>
            </Space>
        },

    ];
    return <PurchaseConfirmationPageAll>
        <PurchaseConfirmationPageTop>
            <SelectModule
                pageName='leaveWarehouse'
                handleSelectModuleOk={handleSelectModuleOk}
                handleSelectModuleReset={handleSelectModuleReset}
            />
        </PurchaseConfirmationPageTop>
        <PurchaseConfirmationPageContent>
            <PageHeader
                className="site-page-header"
                title="全部列表"
            />
            <Table dataSource={listData} columns={columns} rowKey='id' pagination={pagination} />

        </PurchaseConfirmationPageContent>
        <NoStateModule 
                    okAndNoStateModuleShow = {okAndNoStateModuleShow}
                    setOkAndNoStateModuleShow= {setOkAndNoStateModuleShow}
                    clickId = {clickId}
                    handleSelectModuleOk = {handleSelectModuleOk}
        />
    </PurchaseConfirmationPageAll>
}

export default CommitmentConfirmationPage;